<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户查询信息</title>
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css"
	href="static/paginationjs-master-2.1.0/dist/pagination.css" />
</head>
<body>
	<form id="form2" class="form-horizontal" action="LoginAction"
		method="post">
		<!-- 约定：form表单的那么属性值要与（对应实体类的属性名【数据库的字段名】）保持一致【大小写敏感】 -->

		<div class="form-group" style="margin-top: 100px; position:relative">
			<label class="col-sm-2 control-label col-sm-offset-2" style="margin-left:325px">用户名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="txtUserName"
					name="customer_name" placeholder="请输入用户名">
			</div>
			<label class="col-sm-2 control-label" id="userMsg"></label>
		</div>

		<div class="form-group" style="margin-top: 50px;">
			<div class="col-sm-2 col-sm-offset-5" style="margin-top:-30px;margin-left:584px">
				<button id="query" type="button" class="btn btn-default"
					onclick="doAjaxQuery()">查询</button>
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-1 col-sm-9">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>客户账号</th>
							<th>客户id</th>
							<th>客户姓名</th>
							<th>客户电话</th>
							<th>客户邮箱</th>
							<th>客户头像</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7" style="position:absolute;left:0;bottom:5%">
				<div class="inner-left preview" id="querypager">
				</div>
			</div>
		</div>

	</form>

	<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript"
		src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript"
	src="static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
	<script type="text/javascript">
		// 使用jQuery进行ajax处理
		function doAjaxQuery() {
			
			// 使用jquery进行ajax请求处理
			$.ajax({
				type : "post", // 请求方式
				url : "AjaxUsersMessageQueryAction", //请求的url地址
				data : $("#form2").serialize(), // 请求中发送的数据  ，通过serialize方法自动拼写表单中的数据串
				dataType : "json", //响应中发送过来的数据类型（默认text）

				// 执行成功之后的回调函数
				// result是服务器返回的数据
				success : function(result) {
					// 回调函数的DOM操作
					// 解析json数据
					console.info(result);
					
					doPaging(result,5);
					/*
					 注意，如果返回数据为文本类型，需要将json字符串转为json对象
					each函数解析的是json对象，而不是json字符串
					 */
					
					
					},
				error : function(result) {
					alert("请求失败" + result);
				}
			});
		}
		
	/*
		function doAjaxDel(id) {		
						$.ajax({			
						type : "post",	
						dataType:"text",
						url : "AjaxUserMessageDeleteAction",			
						data : {
							 "type" : "delete",
					            "id" : id
								},			
						//cache : true,			
						//async : true,			
						success: function (data){				
						alert("删除成功");	  
						//刷新页面
						window.location.reload();
								    
						},	        
						error:function () {
							alert("请求失败");	        
						}
						});	
						}
		*/
		function doPaging(result,pagesize){
			if(pagesize || pagesize<=0){
				pagesize=5;
			}
			console.info("pagesize:"+pagesize);
			$('#querypager').pagination({
				 dataSource: result, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
				    pageSize: pagesize,// 每页显示的记录条数
				    showGoInput: true, // 是否显示goin按钮
				    showGoButton: true,
				    callback: function(result,pagination){
				    	console.info(pagination);
				    	
              		    	var strHtml = "";
						$.each(result, function(index, eachVal) {
							strHtml += "<tr>";

							strHtml += "<th scope='row'>";
							strHtml += (index + 1);
							strHtml += "</th>";
							strHtml += "<td class='id";
						    strHtml +=(index+1);
							strHtml +="'>";
							strHtml += eachVal.customer_id;
							strHtml += "</td>";
							strHtml += "<td class='name";
							strHtml +=(index+1);
							strHtml +="'>";
							strHtml += eachVal.customer_name;
							strHtml += "</td>";

							strHtml += "<td>";
							strHtml += eachVal.customer_tel;
							strHtml += "</td>";

							strHtml += "<td>";
							strHtml += eachVal.customer_email;
							strHtml += "</td>";
							
							strHtml+="<td>";
							strHtml+="<img src='";
							strHtml+=eachVal.customer_img;					
							strHtml+="' width='30px' height='30px'/>";
							strHtml+="</td>";
							
							strHtml += "<td>";
							strHtml +=" <input id='delaction' onclick='ale";
							strHtml +=(index+1);
							strHtml +="()' type='button' value='删除'  class='delete'/>";
							strHtml += "</td>";
							strHtml += "</tr>";
				    		
				    	});
						// 把解析的html内容，使用dom操作赋值到表格中
						$('#displaytbody').html(strHtml);
				    }
			})
		}
		function del(a,b){
			$.ajax({
				type : "post",//请求类型
				url : " AjaxUsersMessageDeleteAction ",//请求的url
				data : "customer_id="+a ,//= $managername,//发送的数据 
				dataType:"text",
				success : function() {//执行成功后调用的回调函数
					doAjaxQuery();
					alert("用户"+b+"删除成功");
				    
				},
				error : function() {//失败后调用的函数
					alert("删除失败");
				}
			});
		}
		function ale1(){
			var $userid=$(".id1").text();
			var $username = $(".name1").text();
			del($userid,$username);
		}
		function ale2(){
			var $userid=$(".id2").text();
			var $username = $(".name2").text();
			del($userid,$username);
		}
		function ale3(){
			var $userid=$(".id3").text();
			var $username = $(".name3").text();
			del($userid,$username);
		}
		function ale4() {
			var $userid=$(".id4").text();
			var $username = $(".name4").text();
			del($userid,$username);
		}
		function ale5() {
			var $userid=$(".id5").text();
			var $username = $(".name5").text();
			del($userid,$username);
		}
		//function dele(){ 
		//	$.ajax({
		//	type : "post",//请求类型
		//	url : " AjaxUsersMessageDeleteAction ",//请求的url
		//	data : "customer_name" += $managername,//发送的数据 
		//	success : function() {//执行成功后调用的回调函数
		//		alter("删除成功");
		//	},
		//	error : function() {//失败后调用的函数
		//		alter("删除失败");
		//	}
		//});
		//}
		//进行删除操作，用AJAX进行操作
		//$("#delaction").click(function() {
		//获取点击删除按钮时要删除的管理员的名字
		//var $managername = $(".name").text();
		//alert("managername");
		//$.ajax({
		//	type : "post",//请求类型
		//	url : " AjaxUsersMessageDeleteAction ",//请求的url
		//	data : "customer_name" += managername,//发送的数据 
		//	success : function() {//执行成功后调用的回调函数
		//		alter("删除成功");
		//	},
		//	error : function() {//失败后调用的函数
		//		alter("删除失败");
		//	}
		//});
		//});
	</script>
</body>
</html>